<template>
  <div class="bigbox" v-show="IsShow">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in CodeInfo.BannersImgUrl" :key="index">
        <img class="banner" :src="item" alt />
      </van-swipe-item>
    </van-swipe>

    <div class="wang">
      <div v-for="(item, index) in iconlist" :key="index" @click="gopage(index)">
        <img :src="require('../assets/images/images/icon' + index + '.svg')" alt />
        <div>{{ item }}</div>
      </div>
    </div>

    <div class="xitong boxs">
      <div class="title">
        <span class="iconfont icon-zhanghu"></span>
        <span>会员资料</span>
      </div>
      <div class="ziliao">
        <div>会员等级</div>
        <div>无</div>
        <div>会员积分</div>
        <div>0</div>
      </div>
    </div>
    <div class="xitong boxs">
      <div class="title">
        <span class="iconfont icon-zhanghu"></span>
        <span>产品身份系统检测</span>
      </div>
      <div class="quan">{{ CodeInfo.UseCount }}</div>
      <div class="title title2">
        <span class="iconfont icon-warning" style="font-size: 0.4rem"></span>
        <span>改追溯码第“{{ CodeInfo.UseCount }}”次被扫描</span>
      </div>
      <div class="bottom_title">
        <div>首次查询时间：{{ CodeInfo.FirstUse.CreateTime }}</div>
        <div>首次扫描地点：{{ CodeInfo.FirstUse.IpProvince }}</div>
      </div>
    </div>
    <div class="shenfen boxs">
      <div class="title">
        <span class="iconfont icon-zhanghu"></span>
        <span>产品身份信息</span>
      </div>
      <!-- <div class="shenfen_title">
        <span class="iconfont icon-jinggao"></span>
        请对比实物防伪码是否与下图相同！！！
      </div>
      <div class="shenfen_title">(认真辨识颜色与图片样式)</div>-->
      <img :src="CodeInfo.ProductLabel" class="erweima" alt />
      <div class="xinxi">
        <div class="xinxi_title">产品唯一身份信息</div>
        <div class="number">{{ CodeInfo.Code }}</div>
      </div>
      <div class="tishi">
        <div class="iconfont icon-warning"></div>
        <div>查询小贴士：产品所贴防伪标识应与查询识别图案及数字编码一致。</div>
      </div>
    </div>
    <div class="shangjia boxs">
      <div class="title">
        <span class="iconfont icon-zhanghu"></span>
        <span>商家信息</span>
      </div>
      <van-tabs v-model="active">
        <van-tab title="企业信息">
          <ul class="list">
            <li>
              <div>企业名称</div>
              <div class="colors" @click="showtishi = true">
                {{ CodeInfo.EnterpriseName }}
              </div>
            </li>
            <li>
              <div>产品名称</div>
              <div>{{ CodeInfo.EnterpriseIndustry }}</div>
            </li>
            <li>
              <div>公司地址</div>
              <div style="border: none">{{ CodeInfo.EnterpriseAddress }}</div>
            </li>
          </ul>
        </van-tab>
        <van-tab title="公司简介">
          <div class="campany" v-html="CodeInfo.EnterpriseInfoNet"></div>
        </van-tab>
        <van-tab title="产品追溯">
          <div>
            <h2>我们的生产过程</h2>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(item, index) in CodeInfo.ProductTracing" :key="index">
                <img class="banner" :src="item" alt />
              </van-swipe-item>
            </van-swipe>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="fangwei">防伪系统由东莞市易通贴印刷有限公司提供</div>
    <van-popup v-model="show" round>
      <div class="erweibox tan">
        <div class="erweititle">扫一扫下方二维码，关注我们吧！</div>
        <img :src="CodeInfo.WeixinImgUrl" alt />
        <div class="conten">扫码关注我们，获取最新资讯</div>
        <div class="cha" @click="show = false">×</div>
      </div>
    </van-popup>
    <van-popup v-model="showtishi" round>
      <div class="tishitan tan">
        <div class="titles">温馨提示</div>
        <div class="tishi_count">即将跳转至官网简介是否执行</div>
        <div class="tishi_btn">
          <div @click="
            showtishi = false;
          shownet = true;
          ">
            是
          </div>
          <div @click="showtishi = false">否</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="shownet" round>
      <div class="gonet tan">
        <div class="titles">即将跳转到外部网站</div>
        <div class="net_title">安全性未知，是否继续</div>
        <div class="net_count">
          <div class="iconfont icon-lianjie"></div>
          <div class="lian">{{ CodeInfo.EnterpriseNet }}</div>
        </div>
        <div class="net_btn">
          <div @click="shownet = false">取消</div>
          <div @click="gonets">继续访问</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      shownet: false,
      showtishi: false,
      show: false,
      IsShow: false,
      iconlist: ["微信公众号", "企业官网", "商家店铺"],
      CodeInfo: {
        BannersImgUrl: [],
        ProductTracing: [],
        FirstUse: {},
      },
      active: 1,
    };
  },
  created: function () {
    this.IsWeixin();
  },
  mounted: function () { },
  methods: {
    IsWeixin() {
      // var ua = navigator.userAgent.toLowerCase();
      // var isWeixin = ua.indexOf("micromessenger") != -1;
      // if (!isWeixin) {
      //   document.head.innerHTML =
      //     '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
      //   document.body.innerHTML =
      //     '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
      // } else if (!localStorage.getItem("Token")) {
      //   localStorage.setItem("jump", location.href);
      //   this.$router.push({ name: "login" });
      // } else {
      //   this.getCode();
      // }

      this.getCode();
    },
    gonets() {
      this.shownet = false;
      location.href = this.CodeInfo.EnterpriseNet;
    },
    gopage(index) {
      switch (index) {
        case 0:
          this.show = true;
          break;
        case 1:
          this.showtishi = true;
          break;
        default:
          alert("敬请期待");
          break;
      }
    },
    getCode: function () {
      this.$api.get(
        "api/Code/getCode",
        this.$route.params,
        (r) => {
          if (r.ResultStatus != 0) {
            alert(r.INFO);
            this.$router.push({ name: "index" });
            return;
          }
          this.IsShow = true;
          this.CodeInfo = r.DATA;
          this.CodeInfo.EnterpriseInfoNet =
            this.CodeInfo.EnterpriseInfoNet.replace(
              /<img/g,
              "<img style='max-width:100%;height:auto;'"
            ).replace(/src="/g, 'src="https://admin.yitongtie.com/');
          console.log(this.CodeInfo);
        },
        (f) => { }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.campany {
  padding-bottom: 0.3rem;
}

.companycount {
  line-height: 0.5rem;
  text-indent: 0.5rem;
}

.ziliao {
  overflow: hidden;
  margin-top: 0.4rem;

  div {
    line-height: 0.5rem;
  }

  div:nth-child(odd) {
    float: left;
    clear: both;
  }

  div:nth-child(even) {
    float: right;
    color: #e69a2e;
    text-align: right;
  }
}

.gonet {
  .titles {
    text-align: center;
    font-size: 0.35rem;
  }

  .net_title {
    font-size: 0.2rem;
    text-align: center;
    color: rgb(39, 52, 75);
    margin-top: 0.1rem;
  }

  .net_btn {
    overflow: hidden;
    float: right;
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;

    div {
      float: left;
      text-align: center;
      padding: 0.1rem 0.28rem;
      margin-left: 0.3rem;
      border-radius: 0.05rem;
    }

    div:nth-child(1) {
      border: solid 1px #bbbbbb;
    }

    div:nth-child(2) {
      color: white;
      background: rgb(255, 97, 97);
      border: solid 1px rgb(255, 97, 97);
    }
  }

  .net_count {
    border: solid 1px rgba(200, 205, 208, 0.7);
    border-radius: 0.05rem;
    padding: 0.1rem;
    overflow: hidden;
    margin-top: 0.4rem;

    .iconfont {
      width: 0.5rem;
      height: 0.5rem;
      color: white;
      text-align: center;
      line-height: 0.5rem;
      font-size: 0.3rem;
      background: rgba(200, 205, 208, 0.7);
      float: left;
    }

    .lian {
      line-height: 0.5rem;
      float: left;
      color: rgb(143, 146, 148);
      margin-left: 0.2rem;
    }
  }
}

.tishitan {
  .titles {
    color: #ffc300;
  }

  .tishi_count {
    margin-top: 0.5rem;
    text-align: center;
  }

  .tishi_btn {
    overflow: hidden;
    float: right;
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;

    div {
      float: left;
      text-align: center;
      width: 1rem;
    }

    div:nth-child(1) {
      color: rgb(98, 185, 138);
    }

    div {
      color: rgb(148, 5, 5);
    }
  }
}

.cha {
  position: absolute;
  right: 0.2rem;
  top: 0rem;
  font-size: 0.8rem;
}

.tan {
  width: 5.5rem;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  font-size: 0.28rem;
  position: relative;
}

.erweibox {
  .erweititle {
    text-align: center;
    color: #ffc300;
    margin-top: 0.2rem;
  }

  img {
    display: block;
    margin: 0 auto;
    margin-top: 0.4rem;
    width: 3.5rem;
  }

  .conten {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.28rem;
  }
}

.fangwei {
  color: rgba(187, 187, 187, 0.5);
  text-align: center;
  margin: 0.2rem 0 0.5rem 0;
}

.wang {
  width: 100%;
  padding: 0 3rem;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  padding: 0.5rem 0;
  background: white;

  >div {
    text-align: center;
    flex: 1;
    float: left;

    img {
      width: 0.7rem;
    }

    div {
      font-weight: bold;
      margin-top: 0.2rem;
      font-size: 0.3rem;
    }
  }
}

.colors {
  color: #1a6bfb;
  text-decoration: underline;
}

.shangjia {
  .list {
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      margin-top: 0.3rem;

      div:nth-child(1) {
        color: #bbbbbb;
        font-size: 0.3rem;
        line-height: 0.5rem;
      }

      div:nth-child(2) {
        font-size: 0.3rem;
        line-height: 0.8rem;
        border-bottom: solid 1px rgba(187, 187, 187, 0.51);
      }
    }
  }
}

.boxs {
  margin-top: 0.2rem;
  background: white;
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
}

.tishi {
  overflow: hidden;
  margin-top: 0.4rem;

  div {
    line-height: 0.4rem;
    float: left;
    color: #101010;
  }

  div:nth-child(1) {
    color: rgb(26, 107, 251);
    font-size: 0.4rem;
  }

  div:nth-child(2) {
    width: 6.3rem;
    margin-left: 0.2rem;
    font-size: 0.3rem;
  }
}

.xinxi {
  width: 6.5rem;
  margin: 0 auto;
  border-top: solid 1px rgba(187, 187, 187, 0.51);

  .xinxi_title {
    color: #bbbbbb;
    line-height: 0.7rem;
    font-size: 0.3rem;
  }

  .number {
    text-align: center;
    font-size: 0.4rem;
    line-height: 0.8rem;
  }
}

.erweima {
  margin: 0 auto;
  display: block;
  width: 90%;
}

.shenfen {
  .shenfen_title {
    text-align: center;
    font-size: 0.25rem;
    color: #ca3a3a;
    line-height: 0.45rem;

    span {
      color: #ffc300;
    }
  }

  .title {
    margin-bottom: 0.3rem;
  }
}

.bottom_title {
  margin-top: 0.2rem;

  div {
    font-size: 0.28rem;
    line-height: 0.5rem;
  }

  div:nth-child(1) {
    margin-bottom: 0.3rem;
  }
}

.bigbox {
  font-size: 0.2rem;
  width: 100%;
  margin: 0 auto;

  .banner {
    width: 100%;
  }

  .xitong {
    .quan {
      width: 2rem;
      height: 2rem;
      background: #59b968;
      color: white;
      border-radius: 50%;
      line-height: 2rem;
      text-align: center;
      font-size: 1.4rem;
      margin: 0 auto;
      margin-top: 0.8rem;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    }
  }
}

.title2 {
  padding-bottom: 0.3rem;
  margin-top: 0.7rem;
  border-bottom: 0.01rem solid rgba(187, 187, 187, 0.51);
}

.title {
  line-height: 0.45rem;
  overflow: hidden;

  span {
    display: block;
    float: left;
  }

  span:nth-child(1) {
    font-size: 0.45rem;
    color: rgb(26, 107, 251);
  }

  span:nth-child(2) {
    font-size: 0.3rem;
    color: #333333;
    margin-left: 0.12rem;
  }
}
</style>
